<template>
  <div class="index">
    <!-- <anime /> -->
    <!-- <counter /> -->
    <el-button type="primary">主要按钮</el-button>
    <div>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</div>
    <div class="nav">
      <div class="Header">
        <img src="../assets/logo.png" class="img" />
        <span><a href="#">关于</a></span>
      </div>
      <ul>
        <li
          v-for="(todo, indexs) in list"
          :key="todo.num"
          @click="onclick(todo, indexs)"
          :class="indexs == actives ? 'active' : ''"
        >
          {{ todo.id }}==={{ todo.linkto }}
        </li>
      </ul>
    </div>
    <router-view></router-view>
    <!-- <router-view name='main'></router-view>
    <router-view name='sidebar'></router-view> -->
    <div class="bottom"><p>底部</p></div>
  </div>
</template>
<script>
// import anime from "../components/anime";
// import counter from "../components/counter";
export default {
  name: "index",
  components: {
    // counter,
    // anime,
  },
  data() {
    return {
      actives: 0,
      list: [
        { id: 1, linkto: "哈哈" },
        { id: 2, linkto: "那多" },
        { id: 3, linkto: "代付" },
        { id: 4, linkto: "product" },
        { id: 5, linkto: "练习" },
        { id: 6, linkto: "传值" },
        { id: 7, linkto: "周期" },
        { id: 8, linkto: "vueX" },
      ],
    };
  },
  methods: {
    onclick(todo, indexs) {
      this.actives = indexs;
      if (indexs == 0) {
        this.$router.replace({
          name: "forecast",
        });
      } else if (indexs == 1) {
        this.$router.replace({
          name: "publish",
        });
      } else if (indexs == 2) {
        this.$router.replace({
          name: "count",
        });
      } else if (indexs == 3) {
        this.$router.replace({
          name: "product",
        });
      } else if (indexs == 4) {
        this.$router.replace({
          name: "lianxi",
        });
      } else if (indexs == 5) {
        this.$router.replace({
          name: "props",
        });
      } else if (indexs == 6) {
        this.$router.replace({
          name: "cycle",
        });
      }else if (indexs == 7) {
        this.$router.replace({
          name: "vuex",
        });
      }
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.active {
  font-weight: bold;
  color: red;
}
.nav {
  ul {
    margin-top: 50px;
    li {
      display: inline-block;
      margin-left: 30px;
      text-decoration: none;
      font-size: 24px;
      &::after {
        content: "|";
        margin: 0 10px;
        font-weight: normal;
        font-size: 24px;
      }
      &:last-child::after {
        content: none;
      }
    }
    // li:active {
    //   color: red;
    // }
    // li:visited {
    //   color: red;
    // }
  }
}
.Header {
  background: #5a5555;
  height: 50px;
}
a {
  text-decoration: none;
  color: #cbc9c9;
}
.img {
  max-width: 40px;
  margin-left: 50px;
  margin-top: 10px;
}
span {
  float: right;
  margin-right: 50px;
  margin-top: 10px;
}
.bottom{
  background: #5a5555;
  height: 50px;
  p{
    color: #fff;
  }
}
</style>
